import React, { useState, useEffect } from 'react'
import BlockTitle from '../../../../../framework/BlockTitle'
import SouyeApi from '../../../../../../utils/apis/SouyeApi'
import { resourcePath } from '../../../../../../utils/resource'

export default function Fmkswyxz() {
    const [chartData, setChartData] = useState([])
    const [loading, setLoading] = useState(true)
    const [total, setTotal] = useState(0)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true)
                const response = await SouyeApi.cztzl_find("非煤矿山事故危险源")
                if (response && response.data?.length) {
                    setChartData(response.data)
                    const totalCount = response.data.reduce((sum, item) => sum + item.count, 0)
                    setTotal(totalCount)
                } else {
                    const defaultData = [
                        { cztxl: '尾矿山', count: 2 },
                        { cztxl: '露天矿', count: 10 },
                        { cztxl: '地下矿山', count: 1 }
                    ]
                    setChartData(defaultData)
                    setTotal(13)
                }
            } catch (error) {
                console.error('获取非煤矿山危险源数据失败:', error)
                const defaultData = [
                    { cztxl: '尾矿山', count: 2 },
                    { cztxl: '露天矿', count: 10 },
                    { cztxl: '地下矿山', count: 1 }
                ]
                setChartData(defaultData)
                setTotal(13)
            } finally {
                setLoading(false)
            }
        }

        fetchData()
    }, [])

    const getIconPath = (type) => {
        switch (type) {
            case '地下矿山':
            case '非金属地下矿山':
                return resourcePath.homeDxksPng
            case '露天矿':
            case '非金属露天矿山':
                return resourcePath.homeLtkPng
            case '尾矿山':
            case '尾矿库':
                return resourcePath.homeWksPng
            default:
                return resourcePath.homeLtkPng
        }
    }

    const renderIndicatorCard = (item, index) => {
        return (
            <div
                key={index}
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    flex: 1,
                    padding: '10px'
                }}
            >
                {/* 图标容器 */}
                <div style={{
                    position: 'relative',
                    width: '112px',
                    height: '78px',
                    marginBottom: '10px'
                }}>
                    {/* 底座图片 */}
                    <div style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '112px',
                        height: '78px',
                        backgroundImage: `url(${resourcePath.homeDzPng})`,
                        backgroundSize: 'contain',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center',
                        zIndex: 1
                    }} />

                    {/* 浮动图标 */}
                    <div style={{
                        position: 'absolute',
                        top: '-15px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        width: '50px',
                        height: '50px',
                        backgroundImage: `url(${getIconPath(item.cztxl)})`,
                        backgroundSize: 'contain',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center',
                        animation: `float-${index} 3s ease-in-out infinite`,
                        zIndex: 2
                    }} />
                </div>

                {/* 标题 */}
                <div style={{
                    color: '#ffffff',
                    fontSize: '14px',
                    fontWeight: 'bold',
                    marginBottom: '5px',
                    textAlign: 'center'
                }}>
                    {item.cztxl}
                </div>

                {/* 数值 */}
                <div style={{
                    color: '#00E5A0',
                    fontSize: '20px',
                    fontWeight: 'bold'
                }}>
                    {item.count}
                    <span style={{
                        color: '#ffffff',
                        fontSize: '12px',
                        marginLeft: '2px'
                    }}>
                        处
                    </span>
                </div>
            </div>
        )
    }

    return (
        <div style={{
            width: '100%',
            overflow: 'hidden',
            position: 'relative'
        }}>
            <BlockTitle style={{
                marginBottom: 0,
                fontFamily: 'pmzd'
            }}>
                非煤矿山危险源
            </BlockTitle>

            <div style={{
                padding: '20px 10px',
                minHeight: '200px',
                marginTop: 16
            }}>
                {loading ? (
                    <div style={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        height: '180px',
                        color: '#ffffff',
                        fontSize: '14px'
                    }}>
                        数据加载中...
                    </div>
                ) : (
                    <div style={{
                        display: 'flex',
                        justifyContent: 'space-around',
                        alignItems: 'center',
                        height: '100%'
                    }}>
                        {chartData.map((item, index) => renderIndicatorCard(item, index))}
                    </div>
                )}
            </div>

            {/* CSS动画定义 */}
            <style>
                {`
                    @keyframes float-0 {
                        0%, 100% {
                            transform: translateX(-50%) translateY(4px);
                        }
                        50% {
                            transform: translateX(-50%) translateY(-2px);
                        }
                    }
                    
                    @keyframes float-1 {
                        0%, 100% {
                            transform: translateX(-50%) translateY(3px);
                        }
                        50% {
                            transform: translateX(-50%) translateY(-3px);
                        }
                    }
                    
                    @keyframes float-2 {
                        0%, 100% {
                            transform: translateX(-50%) translateY(5px);
                        }
                        50% {
                            transform: translateX(-50%) translateY(-1px);
                        }
                    }
                `}
            </style>
        </div>
    )
} 